<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <script src="js/jquery-1.10.1.js"></script>
</head>
<body>
    <div id="msg"></div>
    <form>
        用户名：<input type="text" name="name"/><br/>
        密码：<input type="password" name="pwd"/><br/>
        <input type="button" value="登陆" onclick="login()"/>
    </form>
    <script>
        // 1、事件绑定
        function login() {
            // 获取两个输入框的value值
            var name = $("input[name='name']").val();
            var pwd = $("input[name='pwd']").val();
            // 2、发送ajax请求
            // a、获取ajax核心对象
            var xhr = new XMLHttpRequest();
            // b、设置发送请求的格式和路径
            xhr.open("get","/ajaxday01/ajax/login?user.username="+name+"&user.password="+pwd);
            // c、发送ajax请求
            xhr.send();
            // d、监听readyState属性值的变化
            xhr.onreadystatechange=function () {
                // e、处理响应结果
               if(xhr.readyState==4&&xhr.status==200){
                   // 3、根据响应结果渲染局部页面
                   console.log(xhr.responseText);
                   if(xhr.responseText==0){
                       $("form").hide();
                       $("div").html("欢迎"+name+"登陆");
                   }else{
                       $("div").html("用户名或密码不正确");
                   }
               }
            }

        }
    </script>
</body>
</html>